/********** 浅色模式 **********/

@brightBg: #fff;
@mainBg: rgba(255, 255, 255, .92);
@loadingBg: rgba(51, 51, 51, 0.82);
@btnAddBg: #21b8a1;
@btnSearchBg: #306ac9;
@btnResetBg: #e48e49;
@btnExportBg: #6b6db5;
@btnConfirmBg: #0078cc;
@btnCancelBg: #ccc;
@btnColor: #eee;
@btnShadow: 1px 1px 1px #666;
@linkEditBg: #1ee7ca;
@linkDelBg: #e48e49;
@linkColor: #ccc;
@tbHeaderBg: #333;
@tbHeaderColor: #ccc;
@tbHeaderBorderColor: transparent;
@pageItemBg: #ccc;
@pageItemActiveBg: #999;
@pageItemColor: #333;
@inputBorderColor: #ccc;
@dialogBg: #aaa;

.bright {

  background: @brightBg;

  .btn.add {
    background: @btnAddBg;
    color: @btnColor;
    box-shadow: @btnShadow;
  }

  .btn.search {
    background: @btnSearchBg;
    color: @btnColor;
    box-shadow: @btnShadow;
  }

  .btn.reset {
    background: @btnResetBg;
    color: @btnColor;
    box-shadow: @btnShadow;
  }

  .btn.export {
    background: @btnExportBg;
    color: @btnColor;
    box-shadow: @btnShadow;
  }

  .btn.confirm {
    background: @btnConfirmBg;
    color: @btnColor;
    box-shadow: @btnShadow;
  }

  .btn.cancel {
    background: @btnCancelBg;
    color: @btnColor;
    box-shadow: @btnShadow;
  }

  .link.edit {
    color: @linkEditBg;
  }

  .link.del {
    color: @linkDelBg;
  }

  .main {
    background: @mainBg;
  }

  /********** 登录页 **********/
  .main.login_page {
    .lp_left {
      background: #ccc;
    }
    .lp_right {
      background: #fff;
    }
    .lpr_bar {
      background: #eee;
      color: #666;
      .lprb_form {
        .lprbf_row {
          .el-input {
            input {
              border-bottom: 2px solid #ccc;
            }
            input:hover, input:focus {
              border-bottom: 2px solid #999;
            }
          }
          .el-button {
            background: #ccc;
            color: #666;
          }
          .el-button:hover {
            background: #999;
            color: #eee;
          }
        }
      }
    }
  }

  /********** 入口页 **********/
  .main.intro_page {
    .ip_header {
      color: #eee;
      background: #333;
      .iph_item:hover {
        color: #fff;
        background: radial-gradient(80% 50% at 50% -20%, rgba(51, 51, 51, 0.52), rgba(204, 204, 204, 0.52) 30%, transparent);
      }
    }
    .ip_carousel {
      .ipc_item {
        .ic_img {
          background: #999;
        }
        .ic_intro {
          background: #333;
        }
      }
    }
    .ip_banner {
      background: #ccc;
    }
    .ip_more {
      background: #ccc;
    }
    .ip_copyright {
      background: #999;
    }
  }

  .component {}

  /********** 组件 - 后台头部 **********/
  .component.header {
    background: #333;
    .h_left {
      .hl_sysname {
        color: #fff;
      }
    }
    .h_center {
      color: #ccc;
      .hc_menu {
        span {
          border-bottom: 2px solid transparent;
        }
      }
      .hc_menu:hover, .hc_menu.selected {
        background: radial-gradient(80% 50% at 50% -20%, rgba(51, 51, 51, 0.52), rgba(204, 204, 204, 0.52) 30%, transparent);
        color: #eee;
        // box-shadow: 0 8px 2px -4px rgba(204, 204, 204, 0.52);
        span {
          border-bottom: 2px solid #ccc;
        }
      }
    }
    .h_right {
      .hr_dropdown {
        background: transparent;
        .hrd_button {
          color: #fff;
          background: #333;
          border-bottom: 2px solid transparent;
        }
        .hrd_button:hover {
          background: #666;
          border-bottom: 2px solid #ccc;
        }
      }
    }
  }

  /********** 组件 - 后台内容 **********/
  .component.back_content {
    .bc_menu {
      background: #444;
      .bcm_item {
        color: #ccc;
        .m_title {}
        .m_sub {
          background: #444;
        }
        }
      }
      .bcm_item:hover, .bcm_item.opened {
        color: #eee;
        background: radial-gradient(80% 50% at 50% -10%, rgba(51, 51, 51, 0.32), rgba(204, 204, 204, 0.32) 30%, transparent);
        .m_sub {
          .ms_title {
          }
          .ms_title:hover {
            color: #ccc;
            background: #555;
          }
      }
    }
    .bcm_item.selected {
      color: #eee;
      background: radial-gradient(80% 50% at 50% -10%, rgba(51, 51, 51, 0.32), rgba(204, 204, 204, 0.32) 30%, transparent);
      > .m_title {
        border-bottom: 2px solid #ccc;
      }
    }
    .bc_view {
      background: #aaa;
    }
  }

  /********** 组件 - 后台面包屑 **********/
  .component.breadcrumb {
    background: #666;
    border-top: 1px solid #333;
    .bc_wrapper {
      .bc_item {
        color: #eee;
        span {
          border-bottom: 2px solid #333;
        }
      }
    }
  }

  /********** 组件 - 后台搜索栏 **********/
  .component.simple_form {
    .el-form {
      .el-form-item {
        .el-form-item__label {
          color: #555;
        }
        .el-form-item__content {
          .el-input__wrapper, select {
            background: #ccc;
            box-shadow: 1px 1px 1px 1px #999;
          }
        }
      }
    }
    .sm_bottom {
      i {
        color: #666;
      }
    }
  }

  /********** 组件 - 后台表格 **********/
  .component.simple_table {
    .el-table {
      th.el-table__cell {
        background: @tbHeaderBg;
        color: @tbHeaderColor;
        border-color: @tbHeaderBorderColor;
      }
      tr:nth-child(odd) {
        td.el-table__cell {
          background: #777;
          color: #eee;
          border-color: transparent;
        }
      }
      tr:nth-child(even) {
        td.el-table__cell {
          background: #999;
          color: #eee;
          border-color: transparent;
        }
      }
    }
    .el-table:before {
      background: #ccc;
    }
    .el-table__inner-wrapper:before {
      background-color: transparent;
    }
  }

  /********** 组件 - 后台分页 **********/
  .component.simple_table_pagination {
    .el-pagination {
      .el-pagination__sizes {
        color: @pageItemColor;
      }
      .el-pager {
        li.number {
          background: @pageItemBg;
          color: @pageItemColor;
        }
        li.number.is-active {
          background: @pageItemActiveBg;
        }
        li.more {
          background: @pageItemBg;
          color: @pageItemColor;
        }
      }
    }
  }

  /********** 组件 - 后台分页 **********/
  .component.simple_dialog {
    .el-dialog {
      background-color: @dialogBg;
      .el-dialog__header {
        .el-dialog__headerbtn:focus, .el-dialog__headerbtn:hover {
          .el-dialog__close {
            color: #ccc;
          }
        }
      }
    }
    .sd_title {
      color: #666;
      border-bottom: 1px solid #999;
      span {
        border-bottom: 2px solid #666;
      }
    }
    .sd_content {

    }
    .sd_footer {}
  }

  /********** ElementPlus - 相关组件 **********/
  .el-input {
    .el-input__wrapper.is-focus {
      box-shadow: 0 0 0 1px #666 inset !important;
    }
  }
  .el-input.is-focus {
    .el-input__wrapper {
      box-shadow: 0 0 0 1px #666 inset !important;
    }
  }

  .el-select {
    .el-input {
      .el-input__wrapper.is-focus {
        box-shadow: 0 0 0 1px #666 inset !important;
      }
    }
    .el-input.is-focus {
      .el-input__wrapper {
        box-shadow: 0 0 0 1px #666 inset !important;
      }
    }
  }

}

/********** ElementPlus - dropdown **********/
.el-dropdown__popper.el-popper {
  border: 0 !important;
  .el-dropdown-menu {
    background: #666 !important;
    .el-dropdown-menu__item {
      color: #ccc !important;
    }
    .el-dropdown-menu__item:hover, .el-dropdown-menu__item:focus {
      color: #fff !important;
      background: #999 !important;
    }
  }
  .el-popper__arrow:before {
    border-color: #666 !important;
    background: #666 !important;
  }

}

/********** ElementPlus - select **********/
.el-select-dropdown__item {
  color: #ccc !important;
}

.el-select-dropdown__item.selected, .el-select-dropdown__item.hover {
  color: #999 !important;
}

/********** ElementPlus - input **********/
.el-input__inner {
  border-color: @inputBorderColor !important;
}

/********** ElementPlus - 加载中 **********/
.el-loading-mask {
  background: @loadingBg !important;
}

/********** ElementPlus - 确认消息框 **********/
.el-message-box {
  background: #ccc;
}

.el-message-box .el-message-box__btns {
  .el-button {
    color: #666;
    background: #fff;
    border: 1px solid #666;
  }
  .el-button:hover {
    border-color: #999;
    color: #999;
  }
  .el-button:focus-visible {
    outline: 0;
    outline-offset: 0;
  }
  .el-button.el-button--primary {
    color: #fff;
    background: #666;
    border: 1px solid #666;
  }
  .el-button.el-button--primary:hover {
    border-color: #666;
    color: #ccc;
  }
  .el-button.el-button--primary:focus-visible {
    outline: 0;
    outline-offset: 0;
  }

}

